<script setup lang="ts">

import ImageUpload from "~/components/ai/ImageUpload.vue";
import VideoPlayer from "~/components/video/VideoPlayer.vue";
import {ComfyUI} from "~/utils/comfyuiApi";

const sdStore = useStableDiffusionStore()
const {isGernateDisable, totalSteps, excutingApi, img2imgParams, ckpt_id} = storeToRefs(sdStore)
//传递参数
onMounted(async () => {
  // socketInit()

})

const uploadfile = ref()
const videoUrl = ref('')
// 默认图片地址
const defaultImage = "https://wangbo0808.oss-cn-shanghai.aliyuncs.com/aidraw/u%3D1090338134%2C2696420997%26fm%3D253%26fmt%3Dauto%26app%3D138%26f%3DJPEG.webp"
// --------------------
//生成图片
const imageGenerate = async () => {
  isGernateDisable.value = true
  //总生成步数计算进度百分比
  totalSteps.value = 36
  excutingApi.value = "图生视频"
  //普通图生图
  await ComfyUI.Initalize()
  //如果没有上传图像，则使用默认的图像url作为参数
  let image_path_origin = ""
  if (!uploadfile.value || !uploadfile.value[0]) {
    image_path_origin = defaultImage
  } else {
    // 上传图像
    image_path_origin = await ComfyUI.uploadImage(uploadfile.value[0].originFileObj)
  }
  const output = await ComfyUI.image2video({
    image_path_origin,
  })
  if (output) {
    //保存历史记录
    await ComfyUI.saveDrawHistory({
      output:output.output,
      params:{
        image_path_origin,
      },
      type:'video'
    })
    videoUrl.value=output.output[0]
  }
  isGernateDisable.value = false
}
</script>

<template>
  <v-card>
    <!--    <context-holder />-->

    <v-card-text>
      <!-- 图片上传组件 -->
      <image-upload :src="defaultImage" v-model:uploadfile="uploadfile"/>
      <v-sheet class="d-flex justify-center align-center" v-if="videoUrl" >
        <video-player :width="600" :src="videoUrl"/>
      </v-sheet>


      <!-- 生成按钮 -->
      <v-btn class="mt-2" size="x-large" color="primary" :loading="sdStore.isGernateDisable"
             :disabled="sdStore.isGernateDisable"
             block @click="imageGenerate">生成视频
        <template v-slot:loader>
          {{ sdStore.btnStatus }}
          <v-progress-circular
              color="primary"
              indeterminate
              :model-value="sdStore.getProcess"></v-progress-circular>
        </template>
      </v-btn>
    </v-card-text>
  </v-card>
</template>

<style scoped lang="scss">
//  .preview-cover {
//     position: absolute;
//     bottom: 0;
//     box-sizing: border-box;
//     width: 100%;
//     padding: 4px;
//     color: #fff;
//     font-size: 12px;
//     text-align: center;
//     background: rgba(0, 0, 0, 0.3);
//   }
</style>
